<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/classify.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2617324_i4at4tugzse.css">
</head>
<body>
    <header>
        <ul>
            <li class="back"><a href="index.html"><input type="button" value="Back"></a></li>
            <li>分类</li>
            <li><select name="city" id="">
                <option value="gz">广州市</option>
                <option value="bj">北京市</option>
                <option value="sh">上海市</option>
                <option value="sz">深圳市</option>
            </select></li>
        </ul>
    </header>
    <div class="main">
        <ul class="banner">
            <li>
                <a href="#food">
                    <img src="./images/classify/图层 1.jpg" alt="">
                    <span>美食</span>
                </a>
            </li>
            <li>
                <a href="#film">
                    <img src="./images/classify/图层 3.jpg" alt="">
                    <span>电影</span>
                </a>
            </li>
            <li>
                <a href="#exercise">
                    <img src="./images/classify/图层 4.jpg" alt="">
                    <span>运动</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/classify/图层 5.jpg" alt="">
                    <span>唱歌</span>
                </a>
            </li>
            <li class="dots">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
        </ul>
        <div class="list">
            <div class="food" id="food">
                <h2>
                    <div class="left">
                        <img src="./images/classify/图层 9.jpg" alt="">
                        <span>美食类</span>
                    </div>
                    <div class="right">
                        <a href="#">
                            <label>
                                <span>更多</span>
                                <i class="iconfont icon-xingzhuang4fuben"></i>
                            </label>
                        </a>
                    </div>
                </h2>
                <div class="pic">
                    <a href="#"><img src="./images/classify/图层 10.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 11.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 12.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 13.jpg" alt=""></a>
                </div>
            </div>
            <div class="exercise" id="exercise">
                <h2>
                    <div class="left">
                        <img src="./images/classify/图层 7.jpg" alt="">
                        <span>运动类</span>
                    </div>
                    <div class="right">
                        <a href="#">
                            <label>
                                <span>更多</span>
                                <i class="iconfont icon-xingzhuang4fuben"></i>
                            </label>
                        </a>
                    </div>
                </h2>
                <div class="pic">
                    <a href="#"><img src="./images/classify/图层 14.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 15.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 16.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 17.jpg" alt=""></a>
                </div>
            </div>
            <div class="film" id="film">
                <h2>
                    <div class="left">
                        <img src="./images/classify/图层 8.jpg" alt="">
                        <span>电影类</span>
                    </div>
                    <div class="right">
                        <a href="#">
                            <label>
                                <span>更多</span>
                                <i class="iconfont icon-xingzhuang4fuben"></i>
                            </label>
                        </a>
                    </div>
                </h2>
                <div class="pic">
                    <a href="#"><img src="./images/classify/图层 18.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 19.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 18.jpg" alt=""></a>
                    <a href="#"><img src="./images/classify/图层 19.jpg" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <ul>
            <li>
                <a href="index.html">
                    <i class="iconfont icon-shouye1"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="classify.html">
                    <i class="iconfont icon-fenlei42"></i>
                    <span>分类</span>
                </a>
            </li>
            <li>
                <a href="found.html">
                    <i class="iconfont icon-shouye_r2_c2"></i>
                    <span>发现</span>
                </a>
            </li>
            <li>
                <a href="personal_center.html">
                    <i class="iconfont icon-wode"></i>
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>
</html>